<template>
  <div class="svg-demo">
    <h2>SVG 图标示例</h2>
    
    <div class="demo-section">
      <h3>基本用法</h3>
      <div class="icon-row">
        <div class="icon-item">
          <SvgIcon name="home" />
          <span>首页图标</span>
        </div>
        <div class="icon-item">
          <SvgIcon name="user" />
          <span>用户图标</span>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>自定义颜色</h3>
      <div class="icon-row">
        <div class="icon-item">
          <SvgIcon name="home" color="#1989fa" />
          <span>蓝色</span>
        </div>
        <div class="icon-item">
          <SvgIcon name="home" color="#07c160" />
          <span>绿色</span>
        </div>
        <div class="icon-item">
          <SvgIcon name="home" color="#ee0a24" />
          <span>红色</span>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>自定义大小</h3>
      <div class="icon-row">
        <div class="icon-item">
          <SvgIcon name="user" size="24" />
          <span>24px</span>
        </div>
        <div class="icon-item">
          <SvgIcon name="user" size="32" />
          <span>32px</span>
        </div>
        <div class="icon-item">
          <SvgIcon name="user" size="48" />
          <span>48px</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 使用Vue 3组合式API
// 由于配置了自动导入，不需要手动导入ref, reactive等
// 由于配置了自动组件注册，不需要手动导入SvgIcon组件
</script>

<style scoped>
.svg-demo {
  padding: 16px;
}

.demo-section {
  margin-bottom: 24px;
}

h2 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #323233;
}

h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #323233;
}

.icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.icon-item span {
  font-size: 12px;
  color: #646566;
}
</style>
